<template>
  <v-card
      :elevation="0"
      style="margin-left: 20px; margin-top: 20px;"
  >
    <v-card-title>
      请选择需要显示飞行轨迹的学员
    </v-card-title>

    <v-card-actions>
      <v-btn
          color="orange lighten-2"
          text
          @click="show = !show"
      >
        {{show ? '收起' : '展开'}}
      </v-btn>

      <v-spacer></v-spacer>

      <v-btn
          icon
          @click="show = !show"
      >
        <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
      </v-btn>
    </v-card-actions>

    <v-expand-transition>
      <div v-show="show">
        <v-divider></v-divider>
        <v-row>
          <v-col
              v-for="(value, key) in stuList"
              :key="key"
              cols="12"
              sm="2"
              md="2"
          >
            <v-checkbox
                v-for="stu_i in value"
                :key="key + stu_i"
                style="margin-left: 20px"
                v-model="selected"
                :label="key + stu_i"
                :color="color[stuStartIdx[key] + stu_i - 1]"
                :value="key + '-' +stu_i"
                hide-details
                @click = "click()"
            ></v-checkbox>
          </v-col>
        </v-row>
      </div>
    </v-expand-transition>
  </v-card>
</template>

<script>
import APIHelper, {stuName, color} from '../util/APIHelper'
export default {
  name: "Legend",
  data () {
    return {
      color: color,
      show: false,
      selected: [],
    }
  },
  computed: {
    selectedList() {
      return this.$store.state.selectedList
    },
    stuStartIdx() {
      return this.$store.state.stuStartIdx
    },
    stuList() {
      return this.$store.state.stuList
    },
  },
  mounted() {
  },
  methods:{
    click() {
      let that = this
      let selectedList = []
      for(let i in that.selected){
        let tmp = that.selected[i].split('-')
        if(!selectedList.hasOwnProperty(tmp[0])){
          selectedList[tmp[0]] = []
        }
        if(!selectedList[tmp[0]].includes(tmp[1])) {
          selectedList[tmp[0]].push(parseInt(tmp[1]))
        }
      }
      that.$store.commit('setSelectedList', selectedList)
      this.$emit('draw');
    }
  }
}
</script>

<style scoped>
.elevation-0 {
  box-shadow: none;
}

</style>